<!--
1. 安装 cnpm install --save bpmn-js 
2. 安装 cnpm install --save bpmn-js-properties-panel
3. 安装 cnpm install --save camunda-bpmn-moddle
-->
<template>
  <div class="containers" >
    <div id="canvas" ref="canvas" class="canvas" style="background:#f0f0f0"></div>

    <!--  不能同时放开，必须注释掉一个  -->
    <!-- 
    <properties-view v-if="bpmnModeler" :modeler="bpmnModeler"></properties-view>
    -->
    <div id="properties-panel"  ref="panelProp" class="panel" style="height:100vh;overflow:auto;"></div>

    <ul class="buttons">
      <li>
        <el-button size="mini" type="primary" @click="saveOperat()">保存</el-button>
        <el-button size="mini" type="primary" @click="readyOperat()">完成</el-button>
        <el-button size="mini" type="primary" @click="downOperat('diagram.bpmn',lastBpmnXmlStr)">下载XML</el-button>
        <el-button size="mini" type="primary" @click="downOperat('diagram.svg',lastBpmnSvgStr)">下载SVG</el-button>
        <el-button size="mini" type="primary" @click="cancelOperat()">关闭</el-button>
      </li>
    </ul>
    
  </div>
</template> 
<script>
import { createBpmnModel,createOriBpmnModel,downloadBpmn } from "./function";
// import BpmnConstants from "./bpmnConstants";
import { initBpmnXmlStr,initBpmnSvgStr } from "./bpmnConstants"; 
import { getFlowTmpl } from "../tmpl/function";
import PropertiesView from "./component/PropertiesView"; 

export default {
  components: {
      PropertiesView
  },
  data() { 
    return {
      diagramVisible: true,
      bpmnModeler: null,
      lastBpmnSvgStr: null,
      lastBpmnXmlStr: null
    };
  },
  props: {
    tmplId: null
  },
  computed: {},
  watch: {
    tmplId: {
      handler(v) {
        this.watchTmplIdHandle();
      },
      immediate: true
    }
  },
  mounted() {

    var canvas = this.$refs.canvas;
    var panelProp =  this.$refs.panelProp;

    // this.bpmnModeler = createOriBpmnModel(canvas);

    this.bpmnModeler = createBpmnModel(canvas,panelProp);

  },
  methods: {
    // 将字符串转换成图并渲染
    transformCanvas(bpmnXmlStr) {
      this.bpmnModeler.importXML(bpmnXmlStr, err => {
        if (err) {
          console.log("初始化失败:" + err);
        } else {
          console.log("初始化成功....");
          this.addBpmnListener();
        }
        // 让图能自适应屏幕
        var canvas = this.bpmnModeler.get("canvas");
        canvas.zoom("fit-viewport");
      });
    },

    // 添加绑定事件
    addBpmnListener() {
      const _this = this;
      // 给图绑定事件，当图有发生改变就会触发这个事件
      this.bpmnModeler.on("commandStack.changed", function() {
        _this.saveSVG(function(err, svg) {
          _this.lastBpmnSvgStr = svg;
        });
        _this.saveDiagram(function(err, xml) {
          _this.lastBpmnXmlStr = xml;
        });
      });
    },
    // 下载为SVG格式,fun是个函数，调用的时候传入的
    saveSVG(done) {
      // 把传入的fun再传给bpmn原型的saveSVG函数调用
      this.bpmnModeler.saveSVG(done);
    },
    // 下载为bpmn格式,fun是个函数，调用的时候传入的
    saveDiagram(done) {
      // 把传入的fun再传给bpmn原型的saveXML函数调用
      this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
        done(err, xml);
      });
    },

    // watch tmpId 处理
    watchTmplIdHandle(){
      let param = {
        id: this.tmplId
      };
      getFlowTmpl(param).then(res => {
        if (res.retHead.code == "0000000") {
          if (res.retBody.bpmnXml) {
            this.lastBpmnXmlStr = res.retBody.bpmnXml;
          } else {
            this.lastBpmnXmlStr = initBpmnXmlStr(res.retBody);
          }
          if (res.retBody.bpmnSvg) {
            this.lastBpmnSvgStr = res.retBody.bpmnSvg;
          } else {
            this.lastBpmnSvgStr = initBpmnSvgStr;
          }
          this.transformCanvas(this.lastBpmnXmlStr);
        }
      });
    },

    // 保存
    saveOperat() {
      let params = {
        id: this.tmplId,
        bpmnXml: this.lastBpmnXmlStr,
        bpmnSvg: this.lastBpmnSvgStr,
        tmplStatus: 2
      };
      this.$emit("saveBpmn", params);
    },
    // 就绪
    readyOperat() {
      let params = {
        id: this.tmplId,
        bpmnXml: this.lastBpmnXmlStr,
        bpmnSvg: this.lastBpmnSvgStr,
        tmplStatus: 1
      };
      this.$emit("saveBpmn", params);
    },
    // 取消操作
    cancelOperat() {
      this.$emit("closeDiagram");
    },
    // 下载
    downOperat(name, data) {
      downloadBpmn(name, data);
    }
  }
};
</script>

<style lang="scss">
@import "bpmn-js/dist/assets/diagram-js.css";
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
@import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
.containers {
  background-color: #ffffff;
  width: 100%;
  height: calc(100vh - 52px);
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
.buttons {
  position: absolute;
  right: 320px;
  top: 2px;
  & > li {
    display: inline-block;
    margin: 5px;
  }
}
</style>
